<template>
  <div>
    <h1>姓名: {{ name }}</h1>
    <h1>年龄: {{ age }}</h1>
    <h1>薪资: {{ salary }}k</h1>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="salary++">涨薪</button>

    <h1>x:{{ x.y }}</h1>
    <button @click="x.y++">点击x.y++ 没效果</button>
    <button @click="x={y:100}">点击x替换有效果</button>

  </div>
</template>
  <script>
import { reactive, toRef,toRefs,shallowReactive,shallowRef,readonly,shallowReadonly } from "vue";

export default {
  name: "Demo",
  setup() {
    // let person = shallowReactive({
    let person = reactive({

      name: "JJ",
      age: 18,
      job: {
        job1: {
          salary: 20
        }
      }
    });
    let x = shallowRef({
        y:0
    })

    //深只读
    // person=readonly(person)

    //浅只读
    person=shallowReadonly(person)

    return {
      person,
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.job1,'salary'),
      x
    //   ...toRefs(person)
    }
  }
};
</script>
    
    <style>
</style>
    
   